<!DOCTYPE html>
<html>
<head>
	<title>vue</title>
	<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script src="vue.js"></script>
<script type="text/javascript" src="axios.min.js"></script>
<script type="text/javascript" src="lodash.js"></script>

</head>
<body>
<div id="app">
	{{message}}	
	<br>
	<input type="text" name="test" v-model='message'>
</div>

<div id="app-2">
  <span v-if="seen" v-bind:title="message" v-on:click="fadeaway">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  <button v-on:click="fadeaway" class="btn btn-primary">verbose</button>
  <ol>
  	<li v-for="todo in todos">{{todo.text}}</li>
  </ol>

  <ul>
  	<todo-item v-for="todo in todos" v-bind:todo="todo" v-bind:key="todo.index"></todo-item>
  </ul>
</div>

<div id="app-ask">
	{{message}}
	<input type="text" v-model="question" name="question">
	{{answer}}

	<p v-bind:class="qa"> full questions: {{fullq}} </p>
</div>

</body>


<script type="text/javascript">

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});


Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})



var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
    ,seen:true
    ,todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  },
  methods:{
  	 fadeaway: function(){
    	this.seen=!this.seen
    }
  },
  computed:{
  	revert:function(){
		console.log(this.message)
	}
  }
});


var app_ask=new Vue({
	el:'#app-ask'
	,data: {
		message:'here you are?'
		,question:'-.-'
		,answer:''
	},
	computed:{
		qa: function(){
			return{
				'alert alert-danger':this.answer==='No',
				'text-primary':this.answer=='Yes'
			}
		},
		fullq:function(){
			return this.question+"---" + this.answer
		},
		aq: {
			get:function(){
			return this.question
		 	},
			set: function(){
				this.getAnswer()
			}
		}
	},
	watch:{
		question:function(){
			this.getAnswer()
		}
	},
	methods:{
		getAnswer:_.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        this.answer = 'Thinking...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // 这是我们为判定用户停止输入等待的毫秒数
      500
    )
	}
});
</script>
</html>